<!-- 基本信息 -->


<template>
    <div class="container-box">
        <div class="left">
            <div>
                <label for="">密接类型：</label><span>{{jointType}}</span>
            </div>
            <div>
                <label for="">关联病例：</label><span @click="linkedCase" class="linked">{{ confirmedPatientName }}</span>
            </div>
            <div>
                <label for="">姓名：</label><span>{{ name }}</span>
            </div>
            <div>
                <label for="">性别：</label><span>{{ sex }}</span>
            </div>
            <div>
                <label for="">出生年月：</label><span>{{ birthday }}</span>
            </div>
            <div>
                <label for="">身份证号/护照号：</label><span>{{ idNum }}</span>
            </div>
            <div>
                <label for="">职业：</label><span>{{ job }}</span>
            </div>
            <div>
                <label for="">联系电话：</label><span>{{ phoneNum }}</span>
            </div>
            <div>
                <label for="">现居地（含街道）：</label><span>{{ address }}</span>
            </div>
            <div class="record">
                <label for="">疫苗接种记录：</label>
                <span>
                    <el-table :data="patientVaccinationList" style="width: 100%" border
                        :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '45px' }">
                        <el-table-column align="center" prop="inoculationNum" label="接种次数" width="150px"/>
                        <el-table-column align="center" prop="vaccineBrand" label="疫苗品牌" width="150px"/>
                        <el-table-column align="center" prop="inoculationTime" label="接种时间" width="150px"/>
                    </el-table>
                </span>
            </div>
            <div>
                <label for="">同居住家庭成员信息：</label><span>{{ familyInformation }}</span>
            </div>
        </div>
        <div class="right">
            <div>
                <label for="">与感染者关系：</label><span>{{ relationship }}</span>
            </div>
            <div>
                <label for="">是否医务人员：</label><span>{{ medicalStaff }}</span>
            </div>
            <div>
                <label for="">接触方式：</label><span>{{ contactMode }}</span>
            </div>
            <div>
                <label for="">末次接触时间：</label><span>{{ lastContactTime }}</span>
            </div>
            <div>
                <label for="">暴露类型：</label><span>{{ exposureType }}</span>
            </div>
            <div>
                <label for="">管控时间：</label><span>{{ controlTime }}</span>
            </div>
            <div>
                <label for="">管控情况：</label><span>{{ controlSituation }}</span>
            </div>
            <div>
                <label for="">是否出现症状：</label><span>{{ symptoms }}</span>
            </div>
            <div>
                <label for="">症状描述：</label><span>{{ symptomDescription }}</span>
            </div>
            <div>
                <label for="">出现时间：</label><span>{{ occurrenceTime }}</span>
            </div>
            <div>
                <label for="">证实材料：</label><span>{{ supportingMaterials }}</span>
            </div>
        </div>
        <div class="img">
            <img src="./pub.svg" alt="">
            <span class="text">居家监测中</span>
        </div>

    </div>
    <div class="exit" @click="exit">
        <el-button>返回</el-button>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, onBeforeMount, reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from '@/util/http';
export default defineComponent({
    name: 'DetailInformation',
    setup() {

        const route = useRoute()
        const router = useRouter();

        // 数据
        const state = reactive({
            jointType: "",
            confirmedPatientName:'',
            associatedCases: null,
            name: '',
            sex: '',
            birthday: '',
            idNum: '',
            job: '',
            phoneNum: '',
            address: '',
            patientVaccinationList: [] as any,
            familyInformation:'',
            relationship:'',
            medicalStaff:'',
            contactMode:'',
            lastContactTime:'',
            exposureType:'',
            controlTime:'',
            controlSituation:'',
            symptoms:'',
            symptomDescription:'',
            occurrenceTime:'',
            supportingMaterials:''
        })

        // 关联病例
        const linkedCase = () => {
            router.push('/ConfirmedCasesDetail')
        }
        // 返回
        const exit = () => {
            router.push('/ManagementOfConfidentialPersonnel')
        }

        onBeforeMount(() => {
            // 获取当前数据的id
            let id = route.query.id
            // 获取基本信息
            axios({
                method: 'get',
                url: 'cryptographer/selectBasicInfo',
                params: {
                    id: id
                }
            })
                .then(res => {
                    state.confirmedPatientName = res.data.data.confirmedPatientName
                    for(let key1 in state){
                        for(let key2  in res.data.data.districtSysContact){
                            if(key1 == key2){
                                state[key1] = res.data.data.districtSysContact[key2]
                            }
                        }
                        if(state[key1] == true){
                            state[key1] = '是'
                        }else if(state[key1] == false){
                            state[key1] = '否'
                        }
                    }

                })
        })

        return {
            // 数据
            ...toRefs(state),
            linkedCase,
            exit
        }
    }
})
</script>
  
<style scoped> .container-box {
     box-sizing: border-box;
     width: 100%;
     padding: 50px 20px;
     background-color: white;
     position: relative;
 }

 .img {
     border-width: 0px;
     position: absolute;
     right: 0px;
     top: 0px;
     width: 88px;
     height: 109px;
 }

 .text {
     color: white;
     position: absolute;
     top: 32px;
     right: -8px;
     transform: rotate(53deg);
 }

 .left {
     float: left;
     width: 50%;
     font-size: 13px;
     color: #333;
 }

 .right {
     float: left;
     width: 50%;
     font-size: 13px;
     color: #333;
 }

 .linked {
     color: #0000ff;
     cursor: pointer;
 }
 .linked:hover{
    text-decoration: underline;
 }

 label {
     box-sizing: border-box;
     height: 45px;
     display: inline-block;
     padding: 15px 10px;
 }

 label {
     font-weight: 650;
 }

 .record {
     display: flex;
 }

 /* 返回按钮 */
 .exit {
     width: 100%;
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .el-button {
     width: 95px;
     height: 40px;
     font-size: 13px;
 }
</style>